<template>
  <div>
    <div id="aCoursesList">
     

        <section class="container">
          <div>
            <header class="comm-title">
        <h2 class="fl tac">
          <span class="c-333">全部留言</span>
          
        </h2>
        
      </header>
      <el-button type="primary" @click="dialogEditText = true"  round>写留言</el-button>
            <!-- 表格 -->
          <el-table
            :data="messageList"
            border
            fit
            highlight-current-row>

            <el-table-column
              label="序号"
              width="90"
              align="center">
              <template slot-scope="scope">
                {{scope.$index + 1 }}
              </template>
            </el-table-column>

            <el-table-column prop="title" label="留言主题" width="485" />

            <el-table-column prop="gmtCreate" label="留言时间" width="250"/>

            <el-table-column label="操作" width="300" align="center">
              <template slot-scope="scope">
                  <el-button type="primary" size="mini" @click="ShowMessage(scope.row.id)" icon="el-icon-edit">查看</el-button>
              </template>
            </el-table-column>
          </el-table>
          </div>
          
        </section>
      </div>
      <!-- /网校课程 结束 -->
      <!-- 查看消息表框 -->
    <el-dialog :visible.sync="dialogShowText" title="查看消息">
        <el-form :model="message" label-width="120px">
            <el-form-item label="消息主题">
                <el-text v-html="message.title" v-model="message.title"/>
            </el-form-item>
            <el-form-item label="消息回应">
                <el-text v-html="message.answerMessage" v-model="message.answerMessage"/>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="dialogShowText = false">确 定</el-button>
        </div>
    </el-dialog>
    <el-dialog :visible.sync="dialogEditText" title="查看消息">
        <el-form :model="message" label-width="120px">
            <el-form-item label="消息主题">
                <el-input  v-model="message.title"/>
            </el-form-item>
            <el-form-item label="留言信息">
                <el-input
                type="textarea"
                :rows="2"
                placeholder="请输入留言"
                v-model="message.messageContent">
                </el-input>
            </el-form-item>
            
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogEditText = false">取 消</el-button>
            <el-button type="primary" @click="sendMessage">确 定</el-button>
        </div>
    </el-dialog>

    </div>
</template>

<script>
import message from '@/api/message'
import commentApi from '@/api/comment'
import cookie from 'js-cookie'

export default {
  data () {
    return {
      messageList: [],
      memberId: '',
      message: {
        messageContent: '',
        answerMessage: '',
        title: '',
        memeberId: ''
      },
      dialogShowText: false,
      dialogEditText: false
    }
  },
  created() {
    this.getAllMessageByMemberId()
  },
  methods: {
    getAllMessageByMemberId() {
        const token = cookie.get('tax_token')
        if (token) {
          console.log(token)
          commentApi.getMemberId()
            .then(response => {
              this.memberId = response.data.data.memberId
              message.getAllMessageByMemberId(response.data.data.memberId)
                  .then(response => {
                      this.messageList = response.data.data.messageList
                   })
            })
        } else {
            // vue 路由跳转
            this.$router.push({path: '/login'})
        }
    },
    // 查看留言
    ShowMessage(id) {
        message.getMessageByMessageId(id)
          .then(response => {
              this.message = response.data.data.messageInfo;
          })
         this.dialogShowText = true
    },
    // 编写留言
    sendMessage(id) {
        this.message.memeberId = this.memberId
        message.addMessage(this.message)
          .then(response => {
              this.$message({
                type: 'success',
                message: '发送成功'
              })
              this.dialogEditText = false
              this.getAllMessageByMemberId()
          })
         
    }

  }
}
</script>
<style>
.box{
    margin: 0 auto;
    padding-top: 80px;
    height: 50px;
    width: 100%;
  }
  .searchBox{
    margin: 0 auto;
    width: 60%;
    position: relative;
  }
  .searchInput{
    display: inline-block;
    width: 85%;
    height: 38px;
    border: 1px solid #cccccc;
    float: left;
    box-sizing: border-box;
    -moz-box-sizing:border-box; /* Firefox */
    -webkit-box-sizing:border-box; /* Safari */
    border-bottom-left-radius: 5px;
    border-top-left-radius: 5px;
  }
  .searchButton{
    display: inline-block;
    width: 15%;
    height: 38px;
    line-height: 40px;
    float: left;
    background-color: #00a0e9;
    font-size: 16px;
    cursor: pointer;
    border-bottom-right-radius: 5px;
    border-top-right-radius: 5px;
    border: none;
    color: #fff;
  }
</style>